@import '../../lib/reset.scss';

.changePswd_content{
    width: 100%;
    height: 100%;
    @include flexbox();
    @include flex-direction(column);
    .scroll_box{
        flex: 1;
        overflow-y: auto;
        padding-bottom: .15rem;
    }
    header{
        height: .61rem;
        background-color: #3CD578;
        overflow: hidden;
        position: relative;
        border-bottom: 1px solid rgba(153,153,153,.35);
        img{
            width: .15rem;
            height: .15rem;
            position: absolute;
            left: .13rem;
            bottom: .15rem;
        }
        p{
            margin-top: .35rem;
            font-size: .17rem;
            color: #FFFFFF;
            font-weight: Bold;
            text-align: center;
            letter-spacing: 3px;
            line-height: .16rem;
        }
    }
    .order_header{
        @include flexbox();
        @include justify-content(space-between);
        @include align-items(flex-end);
        padding: 0 .14rem;
        padding-bottom: .07rem;
        &>div{
            height: .24rem;
            @include flexbox();
            @include align-items(center);
            padding-left: 5px;
            background-color: #fff;
            border-radius:.12rem ;
            width: 2.525rem;
            input{
                font-size: 12px;
                margin-left:5px ;
                border: none;
            }
        }
        img{
            position: static;
            margin-bottom: 5px;
        }
    }
    .list{
        &>div{
            @include flexbox();
            @include flex-direction(column);
            border-bottom: 1px solid rgba(153,153,153,.5);
            height: .655rem;
            div{
                @include flexbox();
                margin: .14rem 0 .1rem 0;
                color: #333333;
                font-size: 13px;
                p{ 
                    margin-left: .15rem;
                    width: .785rem;
                }
                input{
                    border: none;
                    background-color: #fff;
                }
            }
            &>p{  
                margin-left: .15rem;
                font-size: 9px;
                color: rgba(153,153,153,.7);
            }
        }
    }
    .changeSkin{   //换肤页面
        width: 100%;
        @include flexbox();
        @include flex-wrap(wrap);
        @include justify-content(space-between);
        padding: .09rem .145rem;
        padding-bottom: 0;
        div{
            width: 1.685rem;
            img{
                width: 1.685rem;
                height: .965rem;
            }
            p{
                line-height: .35rem;
                font-size: 13px;
                color: #666666;
                text-align: center;
            }
        }
    }
    .newsSet{
        div{
            height: .495rem;
            @include flexbox();
            @include align-items(center);
            @include justify-content(space-between);
            padding: 0 .15rem;
            font-size: 14px;
            color: #333333;
            border-bottom: 1px solid rgba(153,153,153,.5);
            .checkbox::before{
                top: 0;
                background-color: #999999;
            }
            .checkbox::after{
                top: 0;
            }
        }
        &>p{
            margin-top: .185rem;
            padding: 0 .15rem;
            font-size: 11px;
            color: #999999;
        }
    }
    .group{
        position: relative;
        margin: .15rem auto;
        height: 100px ;
        &>div{
            position: absolute;
            width: 1.68rem;
            box-shadow:0px 1px 4px 0px rgba(0, 0, 0, 0.14);
            border-radius: .06rem;
            font-size: 12px;
            color: #333333;
            padding-bottom: .15rem;
            &>img{
                height: 1.13rem;
                width: 100%;
            }
            &>div{
                padding: .10rem .08rem 0 .08rem;
                &>span{
                    img{
                        width: .335rem;
                        height: .165rem;
                        margin-right: .06rem;
                    }
                }
                &>div{
                    @include flexbox();
                    @include justify-content(space-between);
                    margin-top: .125rem;
                    color: #FF6336;
                    span{
                        margin-right: .05rem;
                    };
                    img{
                        width: .185rem;
                        height: .185rem;
                    }
                }
                
            }
        }
    }
    .order_nav{
        @include flexbox();
        @include justify-content(space-between);
        width: 3.4rem;
        height: .375rem;
        margin: 0 auto;
        a{
            line-height: .3751rem;
            box-sizing: border-box;
            color: #666666;
            &.active{
                color: #00B145;
                border-bottom: 2px solid rgba(0,177,69,1)
              }
        }
    }
    .order{
            width: 3.4rem;
            height: .375rem;
            margin: 0 auto;
        a{
            display: block;
            color: #666666;
        }
        .order_list{
            margin-top: .185rem;;
            &>p{
                font-size: 14px;
                font-weight: bold;
                display: flex;
                align-items: center;
                svg{
                    margin-left: 5px;
                    color: #666666;
                }
            }
            .top{
                margin-top: .22rem;
                @include flexbox();
                @include justify-content(space-between);
                img{
                    width: .915rem;
                    height: .915rem;
                }
                &>div{
                    h4{
                        font-weight: 500;
                        font-size: 13px;
                    }
                    p{
                        font-size: 12px;
                        color: #999999;
                    }
                    .am-tag{
                        background-color: #E2F9EB;
                        color: #2DBF66;
                        border: 1px dotted;
                    }
                }
            }
            .msg{
                &>div{
                    padding: .08rem 0;
                    &:nth-child(-n+2){
                        border-bottom:1px solid rgba(153,153,153,.3)
                    }
                    @include flexbox();
                    @include justify-content(space-between);
                    p{
                        font-size: 12px;
                        color: #333333;
                    }
                    span{
                        font-size: 12px;
                    }
                }
            }
            .btn{
                @include flexbox();
                @include justify-content(flex-end);
                margin-top: .11rem;
                .button{
                    border-radius: .15rem;
                    margin-left: .115rem;
                    border: 1px solid #999999;
                }
            }
        }
    }
    
}